<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XBox电源小组件管理</title>
    <script src="vue.js"></script>
    <script src="zquery.js"></script>
</head>

<body style="margin: 0;padding: 0;width: 66vw; transform-origin: 0% 0%; transform: scale(1.5); overflow-x: hidden;">
    <div id="app" style="padding: 8px;">
        <h1>XBox电源小组件管理</h1>
        <div>

            <a href="javascript:window.location.reload()">刷新页面</a> &nbsp;
            <a href="#scenemanage">电源场景管理</a> &nbsp;
            <a href="#manualmanage">手动模式预设管理</a> &nbsp;
        </div>

        <hr>
        <p id="scenemanage">电源场景管理：</p>

        <ol>
            <li v-for="item in scenes" :key="item._id" style="line-height: 1.75em;">
                <span>标题：</span>
                <input type="text" v-model="item.DisplayName">
                <br />
                <span>进程：</span>
                <input type="text" v-model="item.ProcessPath">
                <br />
                <span>TDP：</span>
                <input type="number" min="4" max="30" v-model="item.Tdp">
                <span>GPU：</span>
                <input type="number" min="200" max="2600" step="50" v-model="item.Gpu">
                <br />
                <span>匹配优先级：</span>
                <input type="number" min="1" max="20" v-model="item.Priority">
                <br />
                <span>操作：</span>
                <button @click="saveScene(item)">保存修改</button>
                <button @click="deleteScene(item)">删除</button>
                <br />
                <span>&nbsp;</span>
            </li>
        </ol>

        <hr>
        <p id="manualmanage">手动模式预设设置：</p>

        <ol>
            <li v-for="(item,i) in quicks" :key="item._id" style="line-height: 1.75em;">
                <span>标题：</span>
                <input type="text" v-model="item.Name">
                <br />
                <span>TDP：</span>
                <input type="number" min="4" max="30" v-model="item.Tdp">
                <span>GPU：</span>
                <input type="number" min="200" max="2600" step="50" v-model="item.Gpu">
                <br />
                <span>操作：</span>
                <button @click="moveUp(i)">上移</button>
                <button @click="remove(i)">移除</button>
                <br />
                <span>&nbsp;</span>
            </li>
            <li v-if="quicks.length < 6">
                <button @click="addManual">+ 添加</button>
            </li>
        </ol>
        <button @click="saveManual">保存预设</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                scenes: [],
                quicks: []
            },
            methods: {
                loadData() {
                    $.ajax("api/admin/getscene").then((json) => {
                        var data = JSON.parse(json);
                        if (data.code != 200) {
                            throw data.msg;
                        }
                        this.scenes = data.data;
                    }).catch(err => {
                        alert("获取场景失败！" + err);
                    });

                    $.ajax("api/wdata").then((json) => {
                        var data = JSON.parse(json);
                        if (data.code != 200) {
                            throw data.msg;
                        }
                        this.quicks = data.data.quicks;
                    }).catch(err => {
                        alert("获取预设失败！" + err);
                    });
                },

                saveScene(item) {
                    setTimeout(() => {
                        $.post("api/admin/editscene", item).then((json) => {
                            var data = JSON.parse(json);
                            if (data.code == 200) {
                                alert("保存成功");
                            }
                            else {
                                throw data.msg;
                            }
                        }).catch(err => {
                            alert("保存失败：" + err);
                        });
                    }, 300);
                },
                deleteScene(item) {
                    if (!window.confirm("是否删除此项目?")) {
                        return;
                    }
                    setTimeout(() => {
                        $.ajax("api/admin/delscene?id="+item._id).then((json) => {
                            var data = JSON.parse(json);
                            if (data.code == 200) {
                                alert("删除成功");
                                this.loadData();
                            }
                            else {
                                throw data.msg;
                            }
                        }).catch(err => {
                            alert("保存失败：" + err);
                        });
                    }, 300);
                },

                moveUp(which) {
                    const i = which;
                    var upperone = this.quicks[i - 1];
                    var currentone = this.quicks[i];
                    this.quicks[i - 1] = currentone;
                    this.quicks[i] = upperone;
                    this.$forceUpdate();
                },


                remove(which) {
                    if (window.confirm("是否删除此项目?")) {
                        this.quicks.splice(which, 1);
                    }
                },
                addManual() {
                    var newObj = {
                        _id: "000000000000000000000000",
                        Name: "默认",
                        Tdp: 18,
                        Gpu: 1800,
                        Priority: 10,
                    }
                    this.quicks.push(newObj);
                },
                saveManual() {
                    setTimeout(() => {
                        $.post("api/admin/setmanual", this.quicks).then((json) => {
                            var data = JSON.parse(json);
                            if (data.code == 200) {
                                alert("保存成功");
                            }
                            else {
                                throw data.msg;
                            }
                        }).catch(err => {
                            alert("保存失败：" + err);
                        });
                    }, 300);

                }



            },
            mounted() {
                this.loadData();
            },
        });




    </script>
</body>

</html>